<template>
    <div class="hostpot-rank">
        <div @click="doSplik" class="hostpot-rank-img" v-bind:style='{"background-image":"url("+videoInfo.img220x125+")"}' >
            <div class="hostpot-rank-top-three-index">{{videoInfo.videoIndex}}</div>
        </div>
        <div class="hostpot-rank-top-three-content" >
            <span class="hostpot-3-title" @click="doSplik" v-bind:title="videoTitle">{{videoTitleSubStr}}</span>
        </div>
        <div class="hostpot-rank-top-three-content">
            <span class="hostpot-3-up">UP: {{videoInfo.nickName}}</span>
        </div>
        <div class="hostpot-rank-top-three-content">
            <div class="hostpot-3-play-and-leave-message">
                <i class="el-icon-view"></i> {{videoInfo.bofang}}
            </div>
            <div class="hostpot-3-play-and-leave-message">
                <i class="el-icon-chat-dot-square"></i> {{videoInfo.dianzan}}
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: 'hotspotRank',
        props:{
            videoInfo:{
                type:Object
            }
        },
        data () {
            return {
                videoTitleSubStr:'',
                videoTitle:''
            }
        },
        methods:{
            doSplik(){
                //页面跳转
                var self = this;
                var localStorage = window.localStorage;
                //将videoInfo添加到localStorage中，并跳转页面
                localStorage.setItem("videoInfo",JSON.stringify(this.videoInfo));
                this.$router.push('/chamVideo');
                var formData = new FormData();
                formData.append("videoId",this.videoInfo.videoId);
                self.$api.post('video-service/videoController/addBofangCount',formData,result=>{
                });
            }
        },
        mounted(){
            var videoTitle = this.videoInfo.videoTitle;
            this.videoTitle = videoTitle;

            var videoTitleSubStr = '';
            if(videoTitle.length>15){
                videoTitleSubStr = videoTitle.substring(0,15)+"...";
            }else{
                videoTitleSubStr = videoTitle;
            }
            this.videoTitleSubStr = videoTitleSubStr;
        }
    }
</script>

<style scoped>
    .hostpot-rank{
        width:324px;
        height:70px;
    }

    .hostpot-rank-img{
        width:90px;
        height:50px;
        /*background-image: url("../../assets/img90x50.png");*/
        border-radius: 3px;
        float:left;
        cursor:pointer;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .hostpot-rank-top-three-index{
        width:16px;
        height:16px;
        line-height:16px;
        text-align:center;
        background-color:rgba(251, 91, 104, 0.9);
        border-bottom-right-radius: 3px;
        border-top-left-radius: 3px;
    }

    .hostpot-rank-top-three-content{
        float:left;
        height:16px;
        line-height:16px;
        width:200px;
        margin-left:10px;
        font-size:12px;
    }

    .hostpot-3-title{
        color:#333333;
        cursor:pointer;
    }

    .hostpot-3-up{
        color:#999999;
        cursor:pointer;
    }

    .hostpot-3-title:hover,.hostpot-3-up:hover{
        color:red
    }

    .hostpot-3-play-and-leave-message{
        width:60px;
        float:left;
        color:#999999
    }
    /*.report-third-child{*/
    /*    width:324px;*/
    /*    height:550px;*/
    /*}*/

    /*.report-third-child-title{*/
    /*    height:60px;*/
    /*    width:324px;*/
    /*}*/

    /*.report-third-child-content{*/
    /*    height:446px;*/
    /*    width:324px;*/
    /*    background-color:red*/
    /*}*/

    /*.chaos-small-button{*/
    /*    border-radius: 3px;*/
    /*    width:40px;*/
    /*    height:28px;*/
    /*    color:black;*/
    /*    display: inline-block;*/
    /*    line-height: 28px;*/
    /*    white-space: nowrap;*/
    /*    cursor: pointer;*/
    /*    -webkit-appearance: none;*/
    /*    text-align: center;*/
    /*}*/

    /*.chaos-small-button-active{*/
    /*    border: 1px solid #fae7e8;*/
    /*    color: #fd4c5b;*/
    /*    background: rgba(253,76,91,.1);*/
    /*}*/

</style>
